<template>
  <div>
    <el-pagination
      background
      layout="prev, pager, next, slot, jumper"
      :total="total"
      v-model:current-page="page"
      :page-size="pageSize"
    >
      <template #default v-if="bigScreen">
        <span class="all">全部 {{ total }} 条</span>
        <span class="all">跳转到</span>
      </template>
    </el-pagination>
  </div>
</template>

<script setup lang="ts">
import usePageInfo from "@/stores/pageInfo"
import { storeToRefs } from "pinia"
import { ref, watch, toRefs, reactive, onActivated } from "vue"

// 获取小屏还是大屏模式
const { bigScreen } = storeToRefs(usePageInfo())

const props = defineProps<{
  // 分页总条数
  total: number
  // 一页多少条
  pageSize: number
  // 当前页
  page: number
}>()

const page = ref<number>(1)

// 改变当前页回调事件,当前页一旦改变触发该事件
const emits = defineEmits(["changePage", "update:page"])

// 监听page, 获取最新抛给父组件
watch(page, (value) => {
  emits("changePage", value)
  // 发给子组件
  emits("update:page", value)
})

// 监听父组件的page,如果改变, 需要给子组件
watch(()=>props.page,(value)=>{
  page.value = value
})
</script>

<style lang="scss" scoped>
.all {
  margin-left: 10px;
}

:deep(.el-input__wrapper) {
  flex: 1;
}

:deep(.el-pagination) {
  justify-content: flex-end;
  margin-top: 15px;
}

:deep(.el-pagination__goto) {
  display: none;
}
</style>
